import React, { useState } from 'react';
import { Button, Upload } from 'antd';
import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
import style from './style.module.less';
import ImageUploadDialog from '../ImageUploadDialog';

export default (props: { value?: string | string[]; multiple?: boolean }) => {
  let defaultValue: string[] = [];
  if (props.value) {
    if (Array.isArray(props.value)) {
      defaultValue = props.value;
    } else {
      defaultValue = [props.value];
    }
  }
  const [image, setImage] = useState<string[]>(defaultValue);
  const [visible, setVisible] = useState<boolean>(false);

  const onRemoveFile = (i: number) => {
    image.splice(i, 1);
    setImage([...image]);
  };

  return (
    <div>
      <div className={style.list}>
        {image.map((img, i) => (
          <div key={i} className={style.listItem}>
            <div className={style.remove}>
              <CloseOutlined title={'删除'} onClick={() => onRemoveFile(i)} />
            </div>

            <img src={img} />
          </div>
        ))}

        {!props.multiple && image.length === 0 && (
          <div
            className={[style.listItem, style.plusAdd].join(' ')}
            onClick={() => setVisible(true)}
          >
            <PlusOutlined size={36} />
          </div>
        )}
      </div>

      <ImageUploadDialog
        visible={visible}
        multiple={props.multiple}
        onOk={(result: string[]) => {
          setImage([...result]);
          setVisible(false);
        }}
        onCancel={() => setVisible(false)}
      />
    </div>
  );
};
